<!--
 * @Author: 唐雪
 * @Date: 2022-03-03 14:39:29
 * @LastEditTime: 2022-03-04 16:35:42
 * @FilePath: \win\win-client\src\view\login\index.vue
-->
<template>
  <section class="loginContainer">
    <div class="loginInner">
      <div class="login_header">
        <h2 class="login_logo">尚品优购</h2>
        <div class="login_header_title">
          <a
            href="javascript:;"
            :class="{ on: loginWay }"
            @click="loginWay=login_reg = true"
          >注册账号</a>
          <a
            href="javascript:;"
            :class="{ on: !loginWay }"
            @click="loginWay=login_reg = false"
          >登录账号</a>
        </div>
      </div>
      <div class="login_content">
        <form>
          <!-- 短信登陆 -->
          <div :class="{ on: loginWay }">
            <section class="login_message">
              <input
                type="tel"
                maxlength="11"
                placeholder="用户名"
                v-model="phone"
              />
            </section>
            <section class="login_verification">
              <input
                type="tel"
                maxlength="8"
                placeholder="密码"
                v-model="code"
              />
            </section>
            <section class="login_verification">
              <input
                type="tel"
                maxlength="8"
                placeholder="重复密码"
                v-model="OKcode"
              />
            </section>
          </div>
          <!-- 密码登陆 -->
          <div :class="{ on: !loginWay }">
            <section>
              <section class="login_message">
                <input
                  type="text"
                  maxlength="11"
                  placeholder="用户名"
                  v-model="name"
                />
              </section>
              <section class="login_verification">
                <!-- 是否显示密码 -->
                <input
                  :type="isshowPwd"
                  maxlength="8"
                  placeholder="密码"
                  v-model="pwd"
                />
                <div
                  class="switch_button off"
                  :class="showPwd ? 'on' : 'off'"
                  @click="showPwd = !showPwd"
                >
                  <div
                    class="switch_circle"
                    :class="{ right: showPwd }"
                  ></div>
                </div>
              </section>
            </section>
          </div>
          <button
            class="login_submit"
            @click.prevent="login"
          >{{islogin_reg}}</button>
        </form>
        <a
          href="javascript:;"
          class="about_us"
        >关于我们</a>
      </div>
    </div>
  </section>
</template>
<script>
import { getlogin, setuser, getname } from '../../api/login'
import { Toast } from 'vant'
export default {
  data() {
    return {
      // 控制初始页面注册或者登录
      loginWay: false,
      // 注册
      phone: '',
      code: '',
      OKcode: '',
      showPwd: false,
      // 登录
      name: '',
      pwd: '',
      login_reg: false
    }
  },
  computed: {
    isshowPwd() {
      return this.showPwd ? 'text' : 'password'
    },
    islogin_reg() {
      return this.login_reg ? '注册' : '登录'
    }
  },
  methods: {
    load() {
      this.login_reg = this.loginWay
    },
    async login() {
      if (this.login_reg) {
        if (this.phone === '' || this.code === '') {
          return
        }
        if (this.code !== this.OKcode) {
          Toast('密码输入不一致')
          return
        }
        const Ouser = await getlogin()
        const isreg = Ouser.data.some(item => {
          return item.username === this.phone
        })
        if (isreg) {
          Toast('该用户已注册')
        } else {
          const reguser = {
            username: this.phone,
            img: null,
            tel: null
          }
          await setuser(reguser)
          Toast('注册成功')
          this.phone = ''
          this.code = ''
          this.OKcode = ''
          this.loginWay = !this.loginWay
          this.load()
        }
      } else {
        if (this.name === '' || this.pwd === '') {
          return
        }
        const userlist = await getname(this.name)
        if (userlist.data.length >= 1) {
          localStorage.userlist = JSON.stringify({
            userid: userlist.data[0].id,
            username: userlist.data[0].username,
            img: userlist.data[0].img,
            tel: userlist.data[0].tel
          })
          const token = 'QWERTYUIOP'
          localStorage.token = JSON.stringify(token)
          Toast('登录成功,正在跳转主界面')
          setTimeout(() => {
            this.$router.push('/home')
          }, 1500)
        } else {
          Toast('登录失败,该用户不存在')
        }
      }
    }
  },
  created() {
    this.load()
  }
}
</script>

<style lang="stylus">
@import '../../common/stylus/mixins.styl';

.loginContainer {
  width: 100%;
  height: 100%;
  background: #fff;

  .loginInner {
    padding-top: 60px;
    width: 80%;
    margin: 0 auto;

    .login_header {
      .login_logo {
        margin-top: -10px;
        font-size: 35px;
        font-weight: bold;
        color: #018dd6;
        text-align: center;
      }

      .login_header_title {
        padding-top: 10px;
        text-align: center;

        >a {
          color: #333;
          font-size: 14px;
          padding-bottom: 4px;

          &:first-child {
            margin-right: 40px;
          }

          &.on {
            color: #018dd6;
            font-weight: 700;
            border-bottom: 2px solid #018dd6;
          }
        }
      }
    }

    .login_content {
      >form {
        >div {
          display: none;

          &.on {
            display: block;
          }

          input {
            width: 100%;
            height: 100%;
            padding-left: 10px;
            box-sizing: border-box;
            border: 1px solid #018dd6;
            border-radius: 4px;
            outline: 0;
            font: 400 14px Arial;

            &:focus {
              border: 1px solid #018dd6;
            }
          }

          .login_message {
            position: relative;
            margin-top: 16px;
            height: 48px;
            font-size: 14px;
            background: #fff;

            .get_verification {
              position: absolute;
              top: 50%;
              right: 10px;
              transform: translateY(-50%);
              border: 0;
              color: #ccc;
              font-size: 14px;
              background: transparent;

              // 手机号正确 颜色变黑
              &.right_phone {
                color: black;
              }
            }
          }

          .login_verification {
            position: relative;
            margin-top: 16px;
            height: 48px;
            font-size: 14px;
            background: #fff;

            .switch_button {
              font-size: 12px;
              border: 1px solid #018dd6;
              border-radius: 8px;
              transition: background-color 0.3s, border-color 0.3s;
              padding: 0 6px;
              width: 30px;
              height: 16px;
              line-height: 16px;
              color: #fff;
              position: absolute;
              top: 50%;
              right: 10px;
              transform: translateY(-50%);

              &.off {
                background: #fff;

                .switch_text {
                  float: right;
                  color: #ddd;
                }
              }

              &.on {
                background: #018dd6;
              }

              >.switch_circle {
                // transform translateX(27px)
                position: absolute;
                top: -1px;
                left: -1px;
                width: 16px;
                height: 16px;
                border: 1px solid #ddd;
                border-radius: 50%;
                background: #fff;
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
                transition: transform 0.3s;

                &.right {
                  transform: translateX(30px);
                }
              }
            }
          }

          .login_hint {
            margin-top: 12px;
            color: #999;
            font-size: 14px;
            line-height: 20px;

            >a {
              color: #02a774;
            }
          }
        }

        .login_submit {
          display: block;
          width: 100%;
          height: 42px;
          margin-top: 30px;
          border-radius: 4px;
          background: #018dd6;
          color: #fff;
          text-align: center;
          font-size: 16px;
          line-height: 42px;
          border: 0;
        }
      }

      .about_us {
        display: block;
        font-size: 12px;
        margin-top: 20px;
        text-align: center;
        color: #999;
      }
    }

    .go_back {
      position: absolute;
      top: 5px;
      left: 5px;
      width: 30px;
      height: 30px;

      >.iconfont {
        font-size: 20px;
        color: #999;
      }
    }
  }
}
</style>
